<!DOCTYPE html>
<html>
<head>

<title><%= @transcript.title %></title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load("swfobject", "2.1");
    google.load("jquery", "1");  
    
  </script>
  <script src="javascripts/vid_skim.js" type="text/javascript"></script>
  <link href="stylesheets/vid_skim.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="vid-skim">
  <div class="vid-tabs">

      <%# This means that divisions can only be one word, no special chars, grrr %>
    <% @transcript.divisions.each_pair do |x, d| %><div><a href="#" class="tab-<%=d.name%>"><%= d.name %></a></div><% end %>

  </div>
  
  <div class="viewer clearfix">

  	<div class="timeline">
  	  <div class="scrubber"></div>
  	  <div class="position"></div>    
    </div>
    <div class="vid-nav">
      <%["Next", "Previous"].each do |i| %>
        <a href="" class="<%= i.downcase %>"><%= i%></a>
      <%end%>
    </div>
    

    <div class="player_container">
      <div id="vid-skim-player">
        You need Flash player 8+ and JavaScript enabled to view this video.
      </div>
    </div>
    <div class="trans">
      <div class="extra"></div>
    </div>
    
  </div>
  <div class="rail">
    <% @transcript.divisions.each_pair do |x, d|%>
    <div class="<%= Inflector.parameterize(x, '') %>">
      <div><strong><%= x %></strong></div>
      <% d.unique_entries_by_title.each do |e| %>
          <div><a class="index <%= Inflector.parameterize(e.title, '') %>" href="#<%= e.range.to_seconds(:low) %>" class="index"><%= e.title %></a></div>
      <% end %>
    </div>
    <%end%>
  </div>
</div>



<script type="text/javascript">
data = <%= @transcript.to_json %>



  var params = { allowScriptAccess: "always" };
  var atts = { id: "ytplayer" };
  swfobject.embedSWF("http://www.youtube.com/v/<%= @transcript.youtube_id %>?enablejsapi=1&playerapiid=myytplayer", 
                     "vid-skim-player", "375", "305", "8", null, null, params, atts);
  
  
$.preloadImages(
'images/prev.jpg',
'images/next.jpg',
'images/prev-hover.jpg',
'images/next-hover.jpg'
);
    

  var trans = new Transcript('#vid-skim .timeline', '#vid-skim .trans', '#vid-skim .extra', '#vid-skim .vid-nav','#vid-skim .vid-tabs', '#vid-skim .rail', '#vid-skim .viewer', window.location);
  trans.setData(data, "<%= @transcript.default %>")

  
  
                     
  function onYouTubePlayerReady(playerId) {
  
    var ytplayer = document.getElementById('ytplayer');    
    trans.setPlayer(ytplayer);
    trans.seek(trans.hashSeconds);
    trans.setBounds(<%= @transcript.duration %>);
    setInterval(updateytplayerInfo, 250);  
    trans.initted = true;
  }
  
  
  function updateytplayerInfo() {
    trans.draw(trans.player.getCurrentTime());
  }


</script>

</body>
</html>

